<template>
  <div class="zudao-container">
    <h1 class="page-title">足道客户信息管理 / 添加足道客户</h1>
    <div class="operation-bar">
      <el-button @click="showAddDialog = true" type="primary" icon="el-icon-plus">添加客户</el-button>
      <el-button @click="fetchCustomers" type="success" icon="el-icon-refresh">刷新数据</el-button>
    </div>

    <el-table :data="tableData" height="500" style="width: 100%" class="customer-table" stripe v-loading="loading">
      <el-table-column prop="date" label="注册日期" width="180" align="center" />
      <el-table-column prop="id" label="会员编号" width="100" align="center" />
      <el-table-column prop="name" label="姓名" width="100" align="center" />
      <el-table-column prop="gender" label="性别" width="100" align="center" />
      <el-table-column prop="age" label="年龄" width="100" align="center" />
      <el-table-column prop="phone" label="电话" width="200" align="center" />
      <el-table-column prop="level" label="足道水平" width="200" align="center">
        <template slot-scope="{row}">
          <el-tag :type="getLevelTagType(row.level)">{{ row.level }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="service" label="服务类型" width="200" align="center">
        <template slot-scope="{row}">
          <div class="service-display">
            <img :src="getServiceImage(row.service)" class="service-icon" />
            <span class="service-text">{{ row.service }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加客户对话框 -->
    <el-dialog :visible.sync="showAddDialog" title="添加足道客户" width="650px" class="add-dialog">
      <el-form :model="addForm" label-width="100px" label-position="left" :rules="rules" ref="addFormRef">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="注册日期" prop="date">
              <el-date-picker v-model="addForm.date" type="date" placeholder="选择日期" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会员编号" prop="id">
              <el-input v-model="addForm.id" placeholder="请输入整数类型" prefix-icon="el-icon-user" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="addForm.name" placeholder="请输入姓名" prefix-icon="el-icon-user" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="性别" prop="gender">
              <el-select v-model="addForm.gender" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" value="男" />
                <el-option label="女" value="女" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="年龄" prop="age">
              <el-input-number v-model="addForm.age" :min="0" :max="100" placeholder="请输入年龄" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input v-model="addForm.phone" placeholder="请输入电话" prefix-icon="el-icon-phone" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="足道水平" prop="level">
          <el-select v-model="addForm.level" placeholder="请选择足道水平" style="width: 100%">
            <el-option v-for="item in levelOptions" :key="item.value"
                       :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item label="服务类型" prop="service">
          <el-row :gutter="15">
            <el-col :span="8" v-for="service in serviceOptions" :key="service.value">
              <div class="service-option" @click="addForm.service = service.value"
                   :class="{active: addForm.service === service.value}">
                <img :src="service.image" class="option-icon"  alt=""/>
                <div class="option-label">{{ service.label }}</div>
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <template slot="footer">
        <el-button @click="showAddDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAddForm" :loading="adding">确定添加</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      showAddDialog: false,
      loading: false,
      adding: false,
      tableData: [],
      addForm: {
        date: '',
        id: '',
        name: '',
        gender: '',
        age: '',
        phone: '',
        level: '',
        service: ''
      },
      rules: {
        date: [{ required: true, message: '请选择注册日期', trigger: 'blur' }],
        id: [{ required: true, message: '请输入会员编号', trigger: 'blur' }],
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        level: [{ required: true, message: '请选择足道水平', trigger: 'change' }],
        service: [{ required: true, message: '请选择服务类型', trigger: 'change' }]
      },
      levelOptions: [
        { value: '初级', label: '初级' },
        { value: '中级', label: '中级' },
        { value: '高级', label: '高级' },
        { value: '专家级', label: '专家级' }
      ],
      serviceOptions: [
        { value: '足部按摩', label: '足部按摩', image: require('@/assets/foot_massage.jpg') },
        { value: '足底反射疗法', label: '足底反射疗法', image: require('@/assets/reflexology.jpg') },
        { value: '芳香疗法', label: '芳香疗法', image: require('@/assets/aromatherapy.jpg') },
        { value: '热石按摩', label: '热石按摩', image: require('@/assets/hot_stone.jpg') },
        { value: '全身按摩', label: '全身按摩', image: require('@/assets/full_body.jpg') }
      ]
    };
  },
  methods: {
    // 获取所有客户数据
    async fetchCustomers() {
      try {
        this.loading = true;
        const response = await axios.get('/api/zudao/listzudao');
        this.tableData = response.data.data || [];
        this.$message.success('数据加载成功');
      } catch (error) {
        this.$message.error('获取数据失败');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },
    // 提交添加表单
    async submitAddForm() {
      try {
        this.adding = true;

        // 验证表单
        await this.$refs.addFormRef.validate();

        // 格式化日期
        if (this.addForm.date) {
          this.addForm.date = new Date(this.addForm.date).toISOString().split('T')[0];
        } else {
          this.addForm.date = new Date().toISOString().split('T')[0];
        }

        // 发送请求
        const response = await axios.post('/api/zudao/addzudao', this.addForm);

        if (response.data.code === 200) {
          this.$message.success('添加客户成功');
          this.showAddDialog = false;
          this.fetchCustomers(); // 刷新列表
          this.$refs.addFormRef.resetFields();
          this.addForm = {
            date: '',
            id: '',
            name: '',
            gender: '',
            age: '',
            phone: '',
            level: '',
            service: ''
          };
        } else {
          this.$message.error(response.data.message || '添加客户失败');
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.adding = false;
      }
    },
    getLevelTagType(level) {
      const map = {
        '初级': 'info',
        '中级': '',
        '高级': 'warning',
        '专家级': 'success'
      };
      return map[level] || '';
    },
    getServiceImage(service) {
      const map = {
        '足部按摩': require('@/assets/foot_massage.jpg'),
        '足底反射疗法': require('@/assets/reflexology.jpg'),
        '芳香疗法': require('@/assets/aromatherapy.jpg'),
        '热石按摩': require('@/assets/hot_stone.jpg'),
        '全身按摩': require('@/assets/full_body.jpg')
      };
      return map[service] || '';
    }
  },
  mounted() {
    this.fetchCustomers();
  }
};
</script>

<style scoped>
.zudao-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.page-title {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.operation-bar {
  margin-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.customer-table {
  flex: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.service-display {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}

.service-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  object-fit: contain;
}

.service-text {
  font-size: 14px;
}

.add-dialog {
  border-radius: 8px;
}

.service-option {
  padding: 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.service-option:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}

.service-option.active {
  border-color: #409eff;
  background-color: #ecf5ff;
}

.option-icon {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
  object-fit: contain;
}

.option-label {
  font-size: 16px;
  color: #606266;
  font-weight: 500;
}

@media (max-width: 768px) {
  .zudao-container {
    padding: 10px;
  }

  .page-title {
    font-size: 20px;
  }

  .operation-bar {
    gap: 5px;
  }

  .customer-table {
    height: auto;
  }

  .service-icon {
    width: 32px;
    height: 32px;
  }

  .service-text {
    font-size: 12px;
  }
}
</style>
